<template>
  <div id="threedemo">
  </div>
</template>

<script>
const THREE = require('three')
const OrbitControls = require('three-orbitcontrols')
export default {
    name: "threedemo",
    props: {},
    data() {
        return {
            scene: null,   //场景
            camera: null, //摄像机
            render:null,  //渲染器
            controls:null,  //鼠标控制
        };
    },
    mounted() {
        this.init();
        this.initImg();
        this.animate();
    },
    watch: {},
    methods: {
        // 初始化THREE需要的场景
        init() {
            this.scene = new THREE.Scene();  
            this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
            this.render = new THREE.WebGLRenderer({
                antialias: true
            });
            this.render.setPixelRatio(window.devicePixelRatio);  //设置设备像素比。通常用于避免HiDPI设备上绘图模糊
            this.render.setSize(window.innerWidth, window.innerHeight) //设置THREE场景大小为整个页面
            var app = document.getElementById("threedemo");  
            app.appendChild(this.render.domElement);  //添加场景到DOM中
            this.camera.position.set(200, 0, 0);  //摄像头摆放位置
            // 鼠标控件
			this.controls = new OrbitControls(this.camera, this.render.domElement); //创建控件对象
        },
        initImg() {
            // 创建场景贴图
			this.scene.background = new THREE.CubeTextureLoader()
			.setPath( '../RESULT/' )
				.load( [ 'w04.png', 'w05.png', 'w06.png', 'w02.png', 'w01.png', 'w03.png' ] );
        },
        animate() {
            this.controls.update();
            this.render.render(this.scene, this.camera);
            window.requestAnimationFrame(this.animate);
        }
    },
    components: {},
    computed: {},
};
</script>
<style scoped>
    #threedemo {
        overflow: hidden;
    }
</style>